let dataInfo = [{
    name: "安东尼 戴维斯",
    money: 892001123
}, {
    name: "凯里 欧文",
    money: 668932123
}, {
    name: "史蒂夫 库里",
    money: 698756
}, {
    name: "德里克 罗斯",
    money: 492489
}, {
    name: "保罗 乔治",
    money: 853957123
}, {
    name: "勒布朗 詹姆斯",
    money: 968472
}, {
    name: "詹姆斯 哈登",
    money: 718225
}, {
    name: "凯文 杜兰特",
    money: 889147
}, ];


let main = document.getElementById("main");
let money; //获取数组里金钱数目
let person; //获取类名person的div
let newMoney; //金钱数目（$、逗号、小数点后面的数字）

//封装函数：数字千分位加逗号
function fn(num) {
    let numArr = num.split(".");
    let result = "";
    num = numArr[0];
    while (num.length > 3) {
        result = "," + num.slice(-3) + result;
        num = num.slice(0, num.length - 3);
    };
    if (num) {
        result = num + result
    }
    result = result + "." + numArr[1];
    return result;
};

// 封装函数：去掉金钱里的$、逗号、小数点后面的数字
function monFn(mon) {
    return mon.slice(1, -3).split(",").join("");
};

// 一、添加账户
let add_user = document.getElementById("add_user");
let newDiv; //创建div标签
let index = 0; //获取数组索引值

add_user.addEventListener("click", function() {
    if (index < dataInfo.length) {
        newDiv = document.createElement("div"); //创建div标签
        main.append(newDiv); //添加div标签到main
        newDiv.classList.add("person"); //给每个div标签添加类名person
        money = fn(dataInfo[index].money.toFixed(2)); //给金钱加上小数点再调用函数
        newDiv.innerHTML = `<p>${dataInfo[index].name}</p><p>$${money}</p>`
        index++;
    };
});

// 二、资金翻倍
let double = document.getElementById("double");

double.addEventListener("click", function() {
    person = document.querySelectorAll(".person"); //动态获取person

    person.forEach(function(item, index) {
        money = item.lastElementChild.innerText; //获取每个person里面的金钱的文本
        newMoney = monFn(money) * 2; //金钱翻倍
        newMoney = fn(Number(newMoney).toFixed(2)); //数字翻倍后加小数点，再调用函数
        item.lastElementChild.innerText = `$${newMoney}`;
    })
});

// 三、查询百万富翁
let show_millionaire = document.getElementById("show_millionaire");

show_millionaire.addEventListener("click", function() {
    person = document.querySelectorAll(".person"); //动态获取person

    person.forEach(function(item, index) {
        money = item.lastElementChild.innerText; //获取每个person里面的金钱的文本
        newMoney = monFn(money); //将获取的金钱的文本去掉$、逗号、小数点后面的数字
        if (newMoney < 1000000) {
            item.remove();
        };
    });
});

// 四、财富榜
let sort = document.getElementById("sort");

sort.addEventListener("click", function() {
    person = document.querySelectorAll(".person"); //动态获取person
    let arr = [];
    person.forEach(function(item, index) {
        arr.push(item); //遍历每个person添加到数组
    });

    arr.sort(function(a, b) {
        return monFn(a.children[1].innerText) - monFn(b.children[1].innerText); //对金钱大小排序
    });

    // 重新渲染页面
    arr.forEach(function(item) {
        main.append(item);
    });
});

// 五、计算总额
let calculate = document.getElementById("calculate");
let sum = 0; //计算金钱总额
let last_person; //获取最后一个person

calculate.addEventListener("click", function() {
    newDiv = document.createElement("div"); //创建div标签;
    main.append(newDiv); //添加div标签到main
    newDiv.classList.add("person"); //给div标签添加类名person

    last_person = document.querySelector(".person:last-child"); //获取最后一个person

    person = document.querySelectorAll(".person:not(:last-child)"); //动态获取person（最后一个不获取）
    person.forEach(function(item) {
        money = item.lastElementChild.innerText; //获取每个person里面的金钱的文本
        newMoney = monFn(money); //将获取的金钱的文本去掉$、逗号、小数点后面的数字
        sum += parseFloat(newMoney);
    });
    sum = fn(sum.toFixed(2).toString());
    last_person.innerHTML = `<p>总金额</p><p>$${sum}</p>`;
});

// 六、导航栏
let toggle = document.getElementById("toggle");
let nav = document.getElementById("nav");
let flag = true; //设置节流锁，防止用户疯狂点击导航栏按钮

toggle.addEventListener("click", function() {
    if (!flag) return;

    toggle.classList.toggle("toggle");
    nav.classList.toggle("nav");

    flag = false;
    toggle.addEventListener("transitionend", function() {
        flag = true;
    });
});